<template>
  <div class="content-box">
    <h2 class="demo-title">TimePicker 时间选择器</h2>
    <p class="demo-introduction">用于选择或输入日期</p>
    
    <g-anchor>
      <g-anchor-link href="single-time" title="任意时间点" />
      <g-anchor-link href="range-time" title="任意时间点范围" />
      <g-anchor-link href="api" title="API" />
    </g-anchor>

    <!-- 固定时间点 -->
     <g-block-box
      title="任意时间点"
      introduction="可以选择任意时间"
      id="single-time"
    >
      <template v-slot:demo>
        <g-time-picker v-model="singleTime.value"/>
      </template>
      <template v-slot:code>
        <code class="html">{{ fCode(singleTime.code.html) }}</code>
      </template>
     </g-block-box>

    <!-- 任意时间范围 -->
    <g-block-box
      title="任意时间范围"
      introduction="可选择任意的时间范围"
      id="range-time"
    >
      <template v-slot:demo>
        <g-time-picker v-model="rangeTime.value" is-range/>
      </template>
      <template v-slot:code>
        <code class="html">{{ fCode(rangeTime.code.html) }}</code>
      </template>
    </g-block-box>

    <!-- API -->
    <div id="api">
      <h3 class="demo-table-title">Attributes</h3>
      <P class="demo-table-introduction">属性说明如下：</P>
      <g-table-simple :source="api" type="'demo'"/>
    </div>

    <!-- Events -->
    <div id="events">
      <h3 class="demo-table-title">Events</h3>
      <g-table-simple :source="event" :type="'event'" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      date: [new Date(),new Date()],
      singleTime: {
        code: {
          html: `
          <template>
            <g-time-picker v-model="value"/>
          </template>

          <script>
            export default {
              data() {
                return {
                  value:new Date(2016, 9, 10, 18, 40, 30)
                }
              }
            }
          <\/script>
          `
        },
        value: new Date(2016, 9, 10, 18, 40, 30)
      },
      rangeTime: {
        code: {
          html: `
          <template>
            <g-time-picker v-model="value" is-range/>
          </template>

          <script>
            export default {
              data() {
                return {
                  value:[new Date(2016, 9, 10, 18, 40), new Date(2019, 9, 10, 12, 13)]
                }
              }
            } 
          <\/script> 
          `
        },
        value: [new Date(2016, 9, 10, 18, 40), new Date(2019, 9, 10, 12, 13)]
      },
      api: [
        {
          parameter: 'value / v-model',
          description: '绑定值',
          dataTypes: 'date',
          optional: '',
          default: '',
        },
        {
          parameter: 'range-separator',
          description: '选择范围时的分隔符',
          dataTypes: 'string',
          optional: '-',
          default: '-',
        },
        {
          parameter: 'placeholder',
          description: '非范围选择时的占位内容',
          dataTypes: 'string',
          optional: '',
          default: '',
        },
        {
          parameter: 'startPlaceholder',
          description: '范围选择时开始日期的占位内容',
          dataTypes: 'string',
          optional: '-',
          default: '-',
        },
        {
          parameter: 'endPlaceholder',
          description: '范围选择时结束日期的占位内容',
          dataTypes: 'string',
          optional: '-',
          default: '-',
        },
        {
          parameter: 'is-range',
          description: '是否为时间范围选择',
          dataTypes: 'Boolean',
          optional: 'true/false',
          default: 'false',
        },
        {
          parameter: 'value-format',
          description: '可选，绑定值的格式。不指定则绑定值为 Date 对象',
          dataTypes: 'string',
          optional: 'HH-mm-ss/',
          default: '',
        }
      ],
      event: [
        {
          eventName: 'change',
          description:'用户确认选定的值时触发',
          param: '组件绑定值'
        }
      ]
    }
  },
  methods: {
    change1(val) {
      console.log(val);
    }
  }
}
</script>
